<template>
	<div><div ref="myChart" :style="{ width: width, height: height }"></div></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import * as echarts from 'echarts';
export default defineComponent({
	 name: 'LineChart',
	props: {
		option: {
			type: Object,
			default: null
		},
		height: {
			type: String,
			default: ""
		},
		width:{
			type: String,
			default: ""
		}
	},
	setup(props) {
		const myChart = ref<any>(null);
		
		onMounted(() => {
			setTimeout(() => {
				drawChart();
			}, 20);
		});

		//绘制折线图
		const drawChart = () => {
			// 初始化echarts实例
			const Chart = echarts.init(myChart.value);
			// 父组件传来的实例参数
			Chart.setOption(props.option);
			window.addEventListener('resize', () => {
				//页面大小变化后Echarts也更改大小
				Chart.resize();
			});
		};
		
		return{
			myChart,
			drawChart
		}
	}
});
</script>

<style></style>
